<template>
    <el-menu :default-active="activeIndex" mode="horizontal" background-color="#409EFF"
        text-color="#fff" active-text-color="#ffd04b" @select="handleSelect"
        style="height:50px;width:100%;position: absolute;top:100px;">

        <el-menu-item index="1" style="margin-left: 150px;" @click="goMain()">首页</el-menu-item>

        <el-sub-menu index="2" style="margin-left: 60px;">
            <template #title>车票</template>
            <el-menu-item index="2-1">单程</el-menu-item>
            <el-menu-item index="2-2">往返</el-menu-item>
            <el-menu-item index="2-3">中转换乘</el-menu-item>
            <el-menu-item index="2-4">退改签</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3" style="margin-left:50px;">
            <template #title>团购服务</template>
            <el-menu-item index="3-1">务工人员</el-menu-item>
            <el-menu-item index="3-2">学生团体</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4" style="margin-left: 50px;">
            <template #title>会员服务</template>
            <el-menu-item index="4-1">会员管理</el-menu-item>
            <el-menu-item index="4-2">积分账户</el-menu-item>
            <el-menu-item index="4-3">会员中心</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5" style="margin-left: 50px;">
            <template #title>站车服务</template>
            <el-menu-item index="5-1">重点旅客预约</el-menu-item>
            <el-menu-item index="5-2">便民托运</el-menu-item>
            <el-menu-item index="5-3">约车服务</el-menu-item>
            <el-menu-item index="5-4">动车组介绍</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="6" style="margin-left: 50px;">
            <template #title>商旅服务</template>
            <el-menu-item index="6-1">餐饮·特产</el-menu-item>
            <el-menu-item index="6-2">旅游</el-menu-item>
            <el-menu-item index="6-3">保险</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="7" style="margin-left:50px;">
            <template #title>出行指南</template>
            <el-menu-item index="7-1">车票</el-menu-item>
            <el-menu-item index="7-2">购票</el-menu-item>
            <el-menu-item index="7-3">改签</el-menu-item>
            <el-menu-item index="7-4">身份核验</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="8" style="margin-left:45px;">
            <template #title>信息查询</template>
            <el-menu-item index="8-1">正晚点</el-menu-item>
            <el-menu-item index="8-2">时刻表</el-menu-item>
            <el-menu-item index="8-3">检票口</el-menu-item>
            <el-menu-item index="8-4">客服电话</el-menu-item>
        </el-sub-menu>

    </el-menu>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {useRouter} from "vue-router"

let router = useRouter()

let activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
    console.log(key, keyPath);
    
    // activeIndex.value = keyPath[0];
}

let goMain = () =>{
    router.push("/main")
}
</script>